<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link href="layui/css/layui.css" media="all" rel="stylesheet">
    <!--表格上方的 工具条-->
    <!--    注意：lay-event="add" 指定事件的类型-->
</head>
<body>

<script src="layui/layui.js"></script>
<script id="rabbitToolBar" type="text/html">
    <button class="layui-btn layui-btn-sm" lay-event="insert"><i
            class="layui-icon">&#xe654;</i>新增
    </button>
    <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
    <div class="layui-inline" style="float:right;height:29px;" title="搜索" lay-event="search" lay-submit
         lay-filter="LAY-user-table-search" id="btn"><i class="layui-icon layui-icon-search"></i></div>
    <input type="text" id="rabbitName" style="width:200px;float:right;height:30px;" placeholder="功能名称"
           autocomplete="off" class="layui-input">
</script>
<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        //第一个实例
        table.render({
            elem: '#demo'
            , height: 312
            , url: '/selectMenu?'
            , page: true //开启分页
            , toolbar: '#rabbitToolBar'
            , limits: [3, 5, 8, 10]
            , cols: [[ //表头
                {field: 'menuId', title: '功能编号', width: 150, sort: true, fixed: 'left'}
                , {field: 'parentMenuId', title: '父功能编号', width: 150}
                , {field: 'menuType', title: '功能类别', width: 150, sort: true}
                , {field: 'menuName', title: '功能名称', width: 150}
                , {field: 'menuClass', title: '对应菜单上的样式', width: 150}
                , {field: 'menuUrl', title: '功能对应菜单链接的路径', width: 150}
                , {field: 'menuTip', title: '功能对应菜单链接的提示', width: 150}
                , {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo'}//编辑删除的按钮
            ]]
        });
        //给工具栏绑定事件v
        table.on('toolbar(test)', function (obj) {
            //根据事件对象 来判定点击的是哪一个案例
            if (obj.event == 'insert') {
                layer.open({
                    type: 1,
                    title: "新增窗口",
                    skin: 'layui-layer-rim', //加上边框
                    area: ['400px', '400px'], //宽高
                    content: $("#addContext")
                });
            } else if (obj.event == 'deleteAll') {
                layer.msg('删除');
            } else if (obj.event == 'search') {
                //获取搜索文本框的值
                var txt = $("#rabbitName").val();
                //重载方法 table.reload(ID, options, deep)
                table.reload("demo", {
                    where: {//设置需要传递的参数
                        usrName: txt
                    },
                    page: {
                        //表示查询从第一页开始
                        curr: 1
                    }
                });
            }
        });
        //给最右边的列 添加事件
        table.on('tool(test)', function (obj) {
            switch (obj.event) {
                case "edit":
                    //得到选中行的数据
                    var data = obj.data;
                    //JSON.stringify(data)  拼接成JSON格式的字符串
                    var usrObj = $.parseJSON(JSON.stringify(data));
                    //弹出一个修改的窗口
                    form.val("updateForm", usrObj);
                    layer.open({
                        type: 1, //iframe 内嵌窗口
                        title: '修改角色信息',
                        area: ['400px', '450px'],
                        content: $("#updateContext")
                    });

                    break;
                case "del":
                    var data = obj.data;
                    var roleId = $.parseJSON(JSON.stringify(data)).roleId;
                    $.post("deleteRole", "roleId=" + roleId, function (msg) {
                        table.reload("demo", {
                            where: {//设置需要传递的参数

                            },
                            page: {
                                //表示查询从第一页开始
                                curr: 1
                            }
                        });
                    })
                    break;
            }
        });
        //给添加的提交按钮添加事件
        //给添加的提交按钮添加事件
        form.on('submit(addForm)', function () {
            var data = form.val("addForm");
            $.post("insertRole", data, function (msg) {
                var num = eval(msg);
                layer.msg(num)
                if (num > 0) {
                    alert("增加成功")
                } else {
                    alert("增加失败")
                }
            })
        })
        //给修改的提交按钮设点击事件
        form.on('submit(updateForm)', function () {
            layer.msg("修改")
            var data = form.val("updateForm");
            alert(data)
            $.post("updateRole", data, function (msg) {
                var num = eval(msg);
                table.reload("demo", {
                    where: {//设置需要传递的参数
                        rabbitName: ""
                    },
                    page: {
                        //表示查询从第一页开始
                        curr: 1
                    }
                });
            })
        })
    });
</script>
<table id="demo" lay-filter="test"></table>
<div id="barDemo" style="display: none;">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i
            class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
            class="layui-icon">&#xe640;</i>删除</a>
</div>
<!--新增窗口-->
<div id="addContext" style="display: none; height: 100%; height: 100%; text-align: center;">
    <form action="#" class="layui-form" id="addForm" lay-filter="addForm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">功能编号</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" disabled name="menuId" type="tel">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">父功能编号</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" name="parentMenuId"
                           type="tel">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">功能类别</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" name="menuType"
                           type="tel">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">功能名称</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" name="menuName"
                           type="tel">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">对应菜单上的样式</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" name="menuClass"
                           type="tel">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">功能对应菜单链接的路径</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" name="menuUrl"
                           type="tel">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">功能对应菜单链接的提示</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" name="menuTip"
                           type="tel">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="demo1" lay-submit="" type="submit">立即提交</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>
    </form>
</div>
<!--修改窗口-->
<div id="updateContext" style="display: none; height: 100%; height: 100%; text-align: center;">
    <form action="#" class="layui-form" id="updateForm" lay-filter="updateForm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">功能编号</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" disabled name="menuId" type="tel">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">父功能编号</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" name="parentMenuId"
                           type="tel">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">功能类别</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" name="menuType"
                           type="tel">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">功能名称</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" name="menuName"
                           type="tel">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">对应菜单上的样式</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" name="menuClass"
                           type="tel">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">功能对应菜单链接的路径</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" name="menuUrl"
                           type="tel">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">功能对应菜单链接的提示</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" name="menuTip"
                           type="tel">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="demo1" lay-submit="" type="submit">立即提交</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>